<#include "head.ftl">
   
   <!-- revolution slider start -->
     <div class="fullwidthbanner-container main-slider">
         <div class="fullwidthabnner">
             <ul id="revolutionul" style="display:none;">
                 <!-- 1st slide -->
				 <#list headlineList as e>
		              <li data-transition="fade" data-slotamount="8" data-masterspeed="700" data-delay="5000" data-thumb="">
		                <img src="${BASE_PATH}/${e.picture}" alt=""/>
		              </li>
		         </#list>
             </ul>
            <div class="tp-bannertimer tp-top"></div>
         </div>
     </div>
     <!-- revolution slider end -->
	
  <!--container start-->
    <div class="container">
        <div class="row">
            <!--feature start-->
            <div class="text-center feature-head">
                <h1>welcome to flatlab - shared on weidea.net</h1>
                <p>Professional html Template Perfect for Admin Dashboard</p>
            </div>
            <div class="col-lg-4 col-sm-4">
                <section>
                    <div class="f-box">
                        <i class=" icon-desktop"></i>
                        <h2>responsive design</h2>
                    </div>
                    <p class="f-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener.</p>
                </section>
            </div>
            <div class="col-lg-4 col-sm-4">
                <section>
                    <div class="f-box active">
                        <i class=" icon-code"></i>
                        <h2>friendly code</h2>
                    </div>
                    <p class="f-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener.</p>
                </section>
            </div>
            <div class="col-lg-4 col-sm-4">
                <section>
                    <div class="f-box">
                        <i class="icon-gears"></i>
                        <h2>fully customizable</h2>
                    </div>
                    <p class="f-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener.</p>
                </section>
            </div>
            <!--feature end-->
        </div>
        <div class="row">
            <!--quote start-->
            <div class="quote">
                <div class="col-lg-9 col-sm-9">
                    <div class="quote-info">
                        <h1>developer friendly code</h1>
                        <p>Bundled with awesome features, UI resource unlimited colors, advanced theme options & much more!</p>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-3">
                    <a href="#" class="btn btn-danger purchase-btn">Purchase now</a>
                </div>
            </div>
            <!--quote end-->
        </div>
    </div>


    <!--property start-->
    <div class="property gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-6 text-center">
                    <img src="${TEMPLATE_BASE_PATH}/img/property-img.png" alt="">
                </div>
                <div class="col-lg-6 col-sm-6">
                    <h1>flat & modern trend design</h1>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener. natus error sit voluptatem accusantiu.</p>
                    <a href="javascript:;" class="btn btn-purchase">Purchase now</a>
                </div>
            </div>
        </div>
    </div>
    <!--property end-->

     <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <!--tab start-->
                <section class="panel tab">
                    <header class="panel-heading tab-bg-dark-navy-blue">
                        <ul class="nav nav-tabs nav-justified ">
                            <li class="active">
                                <a data-toggle="tab" href="#news">
                                    News
                                </a>
                            </li>
                            <li>
                                <a data-toggle="tab" href="#events">
                                    Events
                                </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#notice-board">
                                    Notice board
                                </a>
                            </li>
                        </ul>
                    </header>
                    <div class="panel-body">
                        <div class="tab-content tasi-tab">
                            <div id="news" class="tab-pane active">
                                <article class="media">
                                    <a class="pull-left thumb p-thumb">
                                        <img src="${TEMPLATE_BASE_PATH}/img/product1.jpg" alt="">
                                    </a>
                                    <div class="media-body">
                                        <a href="#" class=" p-head">News Tittle goes here</a>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    </div>
                                </article>
                                <article class="media">
                                    <a class="pull-left thumb p-thumb">
                                        <img src="${TEMPLATE_BASE_PATH}/img/product2.png" alt="">
                                    </a>
                                    <div class="media-body">
                                        <a href="#" class=" p-head">News Tittle goes here 2</a>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. simsut dorlor</p>
                                    </div>
                                </article>
                                <article class="media">
                                    <a class="pull-left thumb p-thumb">
                                        <img src="${TEMPLATE_BASE_PATH}/img/product1.jpg" alt="">
                                    </a>
                                    <div class="media-body">
                                        <a href="#" class=" p-head">News Tittle goes here 3</a>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. sumon ahmed</p>
                                    </div>
                                </article>
                            </div>
                            <div id="events" class="tab-pane">
                                <article class="media">
                                    <a class="pull-left thumb p-thumb">
                                        <!--image goes here-->
                                    </a>
                                    <div class="media-body">
                                        <a href="#" class="cmt-head">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
                                        <p> <i class="icon-time"></i> 1 hours ago</p>
                                    </div>
                                </article>
                                <article class="media">
                                    <a class="pull-left thumb p-thumb">
                                        <!--image goes here-->
                                    </a>
                                    <div class="media-body">
                                        <a href="#" class="cmt-head">Nulla vel metus scelerisque ante sollicitudin commodo</a>
                                        <p> <i class="icon-time"></i> 23 mins ago</p>
                                    </div>
                                </article>
                                <article class="media">
                                    <a class="pull-left thumb p-thumb">
                                        <!--image goes here-->
                                    </a>
                                    <div class="media-body">
                                        <a href="#" class="cmt-head">Donec lacinia congue felis in faucibus. </a>
                                        <p> <i class="icon-time"></i> 15 mins ago</p>
                                    </div>
                                </article>
                            </div>
                            <div id="notice-board" class="tab-pane ">
                                <p>Notice board goes here Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener.</p>
                                <p>Notice board goes here Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ablic jiener.</p>
                            </div>
                        </div>
                    </div>
                </section>
                <!--tab end-->
            </div>
            
            <div class="col-lg-6">
                <!--testimonial start-->
                <div class="about-testimonial boxed-style about-flexslider ">
                    <section class="slider">
                        <div class="flexslider">
                            <ul class="slides about-flex-slides">
                                <li>
                                    <div class="about-testimonial-image ">
                                        <img alt="" src="${TEMPLATE_BASE_PATH}/img/testimonial-img-1.jpg">
                                    </div>
                                    <a class="about-testimonial-author" href="#">Ericson Reagan</a>
                                    <span class="about-testimonial-company">ABC Realestate LLC</span>
                                    <div class="about-testimonial-content">
                                        <p class="about-testimonial-quote">
                                            Pellentesque et pulvinar enim. Quisque at tempor ligula. Maecenas augue ante, euismod vitae egestas sit amet, accumsan eu nulla. Nullam tempor lectus a ligula lobortis pretium. Donec ut purus sed tortor malesuada venenatis eget eget lorem.
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="about-testimonial-image ">
                                        <img alt="" src="${TEMPLATE_BASE_PATH}/img/avatar2.jpg">
                                    </div>
                                    <a class="about-testimonial-author" href="#">Jonathan Smith</a>
                                    <span class="about-testimonial-company">DEF LLC</span>
                                    <div class="about-testimonial-content">
                                        <p class="about-testimonial-quote">
                                            Pellentesque et pulvinar enim. Quisque at tempor ligula. Maecenas augue ante, euismod vitae egestas sit amet, accumsan eu nulla. Nullam tempor lectus a ligula lobortis pretium. Donec ut purus sed tortor malesuada venenatis eget eget lorem.
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <!--testimonial end-->
            </div>
            <div class="col-lg-10">&nbsp;</div>
        </div>

    </div>

     <!--parallax start-->
     <section class="parallax1">
         <div class="container">
             <div class="row">
                 <h1>“And here i am using my own lungs like a sucker. How is education supposed to make <br>
                     me feel smarter?”</h1>
             </div>
         </div>
     </section>
     <!--parallax end-->

     <div class="container">
         <!--clients start-->
         <div class="clients">
             <div class="container">
                 <div class="row">
                     <div class="col-lg-12 text-center">
                         <ul class="list-unstyled">
                             <li><a href="#"><img src="${TEMPLATE_BASE_PATH}/img/clients/logo1.png" alt=""></a></li>
                             <li><a href="#"><img src="${TEMPLATE_BASE_PATH}/img/clients/logo2.png" alt=""></a></li>
                             <li><a href="#"><img src="${TEMPLATE_BASE_PATH}/img/clients/logo3.png" alt=""></a></li>
                             <li><a href="#"><img src="${TEMPLATE_BASE_PATH}/img/clients/logo4.png" alt=""></a></li>
                             <li><a href="#"><img src="${TEMPLATE_BASE_PATH}/img/clients/logo5.png" alt=""></a></li>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
         <!--clients end-->
     </div>

     <!--container end-->
     
 <script>

      RevSlide.initRevolutionSlider();

      $(window).load(function() {
          $('[data-zlname = reverse-effect]').mateHover({
              position: 'y-reverse',
              overlayStyle: 'rolling',
              overlayBg: '#fff',
              overlayOpacity: 0.7,
              overlayEasing: 'easeOutCirc',
              rollingPosition: 'top',
              popupEasing: 'easeOutBack',
              popup2Easing: 'easeOutBack'
          });
      });

      $(window).load(function() {
          $('.flexslider').flexslider({
              animation: "slide",
              start: function(slider) {
                  $('body').removeClass('loading');
              }
          });
      });

      //    fancybox
      jQuery(".fancybox").fancybox();



  </script>    
<#include "foot.ftl">     